<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea placeholder="请输入消息"></textarea>
    <button>发送</button>
    <h1>消息列表</h1>
    <div class="list">
      <p>默认的消息</p>
    </div>

    <script>
      const textarea = document.querySelector("textarea");
      const btn = document.querySelector("button");
      const h1 = document.querySelector("h1");
      const list = document.querySelector(".list");

      // 为按钮添加点击事件监听器
      btn.addEventListener("click", () => {
        // 获取并修剪文本区域的输入内容，去除首尾空格
        const message = textarea.value.trim();
        // 创建新的段落元素
        const newP = document.createElement("p"); // <p></p>
        // 设置新段落元素的文本内容为输入的消息
        newP.innerText = message; // <p>message</p>

        // 将新段落元素插入到消息列表容器的开头
        list.prepend(newP);

        // 将新的列表项追加到现有列表中
        list.append(newP);
        
        // 为新段落元素添加点击事件监听器
        newP.addEventListener("click", () => {
          // 点击时移除该段落元素
          newP.remove();
        });
      });
    </script>
  </body>
</html>
